<template>
  <div>
    <div id="left_div" ref="left_div">
      <ToolBarComponent>
        <ButtonBarRowComponent>
          <Button text="新增" :click-function="addModify"/>
          <Button text="减少" :click-function="subModify"/>
        </ButtonBarRowComponent>
        <div ref="modify-input" v-for="(item,index) of modifyNum" v-bind:key="index">
          <ToolBarComponent>
            <SelectInputComponent ref="letName" input-lable="变量名" :select-function="clickModifyInput"/>
            <NumberInputComponent ref="letValue" input-lable="变量值"/>
          </ToolBarComponent>
        </div>
      </ToolBarComponent>
    </div>
    <div id="right_div" ref="right_div">
      <div>
        <ButtonBarRowComponent>
          <Button text="查询" ref="add_modify_btn" :click-function="submit"/>
        </ButtonBarRowComponent>
        <ToolBarComponent ref="queryForm">
          <InputComponent ref="modifyName_input" input-lable="修正名称" input-name="modifyName"/>
          <InputComponent ref="modifyCode_input" input-lable="修正代码" input-name="modifyCode"/>
          <SelectComboComponent ref="modifyGroup_input" input-lable="修正类型" input-name="modifyGroup" group-code="BM03003"/>
          <SelectComboComponent ref="modifyType_input" input-lable="修正计算模式" input-name="modifyType" group-code="BM03002"/>
        </ToolBarComponent>
        <GridComponent
            ref="ck3ModifyGrid"
            :auto-load="true"
            key-property-name="id"
            grid-name="ck3ModifyGrid"
            select-moduel="single"
            load-url="ck3/generator/queryDictForPage.do"
            max-height-prop="40%"
            :paging-moduel="true"
        >
          <GridColumnComponent width="320px" column-name="修正名称" index-name="modifyName"/>
          <GridColumnComponent width="300px" column-name="修正代码" index-name="modifyCode"/>
          <GridColumnComponent width="150px" column-name="修正类型" index-name="modifyGroup" :data-render="renderModifyGroupDictValue"/>
          <GridColumnComponent width="150px" column-name="修正计算模式" index-name="modifyType" :data-render="renderModifyTypeDictValue"/>
        </GridComponent>
        <DictGroupComponent ref="dict">
          <DictDefineComponent dict-group="BM03002"/>
          <DictDefineComponent dict-group="BM03003"/>
        </DictGroupComponent>
      </div>
    </div>
  </div>
</template>

<script>
import ToolBarComponent from "@/components/toolbar/ToolBarComponent";
import ButtonBarRowComponent from "@/components/button/ButtonBarRowComponent";
import Button from "@/components/button/ButtonComponent";
import InputComponent from "@/components/input/InputComponent";
import SelectComboComponent from "@/components/input/SelectComboComponent";
import GridColumnComponent from "@/components/grid/GridColumnComponent";
import GridComponent from "@/components/grid/GridComponent";
import DictGroupComponent from "@/components/dict/DictGroupComponent";
import DictDefineComponent from "@/components/dict/DictDefineComponent";
import {translateByDict} from "@/common-util";
import SelectInputComponent from "@/components/input/SelectInputComponent";
import NumberInputComponent from "@/components/input/NumberInputComponent";

export default {
  name: "Ck3ModifyGeneratorPage",
  components: {
    NumberInputComponent,
    SelectInputComponent,
    DictDefineComponent,
    DictGroupComponent,
    SelectComboComponent, InputComponent, Button, ButtonBarRowComponent, ToolBarComponent, GridComponent, GridColumnComponent},
  data(){
    return{
      modifyNum:0
    }
  },
  methods:{
    submit(){
      this.$refs["ck3ModifyGrid"].addQueryParams(this.$refs["queryForm"].getSubmitParams());
      this.$refs["ck3ModifyGrid"].load();
    },
    renderModifyGroupDictValue(columnData){
      return translateByDict(columnData,this.$refs["dict"].getDictGroup("BM03003"));
    },
    renderModifyTypeDictValue(columnData){
      return translateByDict(columnData,this.$refs["dict"].getDictGroup("BM03002"));
    },
    addModify(){
      this.modifyNum = this.modifyNum + 1;
    },
    subModify(){
      if(this.modifyNum>0){
        this.modifyNum = this.modifyNum - 1;
      }
    },
    clickModifyInput(event, component){
      let dict = this.$refs["ck3ModifyGrid"].getSelectData();
      if(undefined===dict || dict.length<1){
        return;
      }
      component.setSelectedValue({'display':dict[0].modifyName,'value':dict[0].id})
    }
  }
}
</script>

<style scoped>
#left_div{
  width: 35%;
  float: left;
  min-height: 98%;
  max-height: 98%;
}
#right_div{
  border-left: 1px solid black;
  width: 63%;
  float: left;
  min-height: 98%;
  max-height: 98%;
}
</style>